<template>
  <div class="orderIndent">
    <div class="allsearch">
      <section class="search-content">
        <el-row :gutter="4" type="flex" justify="start">
          <el-col :span="24">
            <el-date-picker
              v-model="value"
              :picker-options="picker"
              :default-time="['00:00:00', '23:59:59']"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="|"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width:300px"
              @change="handleFilter"
            />
            <el-input
              v-model="username"
              placeholder="请输入名称"
              style="width:260px"
              @keyup.enter.native="handleFilter"
            />
            <el-select v-model="option2" style="width:120px" @change="handleFilter">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-select v-model="option3" style="width:120px" @change="handleFilter">
              <el-option
                v-for="item in options3"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-select v-model="option4" style="width:120px" @change="handleFilter">
              <el-option
                v-for="item in options4"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-button type="primary" @click="handleFilter">搜索</el-button>
            <el-button size="medium" type="info" @click="clearParams">清空</el-button>
          </el-col>
        </el-row>
      </section>
      <subtable
        v-loading="listLoading"
        :table-label="indentLabel"
        :table-data="indentData.slice((currentpage-1)*pagesize,currentpage*pagesize)"
      >
        <el-table-column slot="first" label="商品名称" align="center" min-width="30">
          <template slot-scope="scope">
            <el-button type="text">{{ scope.row.title }}</el-button>
            <br>
            <span style="font-size:12px;color:#8a8a8a">订单号: {{ scope.row.sn }}</span>
            <br>
            <span style="font-size:12px;color:#8a8a8a">创建时间: {{ scope.row.createTimeTimeStr }}</span>
          </template>
        </el-table-column>
        <el-table-column slot="isPro" label="购买者" align="center" min-width="10">
          <template slot-scope="scope">
            <el-button type="text" @click="handleClickTrade(scope)">{{ scope.row.userName }}</el-button>
          </template>
        </el-table-column>
        <el-table-column slot="button" label="操作" align="center" min-width="20">
          <template slot-scope="scope">
            <el-button type="primary" @click="handleCLickDetail(scope)">详情</el-button>
            <el-button type="primary" @click="handleCLickDialog(scope)">改价</el-button>
          </template>
        </el-table-column>
      </subtable>
      <pagination
        :total="total"
        :current-page="currentpage"
        :page-size="pagesize"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
      <purchaser-dialog
        :visiabledialog="purchaserDialog"
        :dialog-data="purchaserData"
        @changeVisiable="changeVisiable1"
      />
      <detail-dialog
        :visiabledialog="detailDialog"
        :dialog-data="detailData"
        @changeVisiable="changeVisiable2"
      />
      <el-dialog :visible.sync="orderDialog" :before-close="handleCancel" title="订单改价">
        <span style="font-size:18px;">商品价格: {{ orderData[0]? orderData[0].totalPrice: '' }}</span>
        <el-table :data="orderData">
          <el-table-column prop="title" label="商品名称" min-width="10">
            <template slot-scope="scope">
              <span>{{ scope.row.title }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="amount" label="订单价格" min-width="10">
            <template slot-scope="scope">
              <span>{{ scope.row.amount }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="couponDiscount" label="优惠" min-width="10" align="center">
            <template slot-scope="scope">
              <el-input v-model="discount" style="width:60px"/>
              <span>折</span>
            </template>
          </el-table-column>
          <el-table-column prop="realCost" label="实付" min-width="10">
            <template slot-scope="scope">
              <span>{{ discount ? Number(scope.row.amount)*Number(discount)/10: scope.row.amount }}</span>
            </template>
          </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handleCancel">关 闭</el-button>
          <el-button type="primary" @click="updateDiscount">提 交</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import Subtable from '@/components/Eltable'
  import Pagination from '@/components/Pagination' // 分页组件
  import PurchaserDialog from '@/components/Dialog'
  import DetailDialog from './dialog'
  import {getOrderList, getOrderLogList, updateDiscount} from '@/api/deal/order' // 数据接口
  import {getUserDetail} from '@/api/deal/userDetail' // 数据接口
  import {getTenantId} from '@/utils/auth'

  export default {
    components: {
      Subtable,
      Pagination,
      PurchaserDialog,
      DetailDialog
    },
    data() {
      return {
        discount: '',
        purchaserDialog: false,
        detailDialog: false,
        orderDialog: false,
        orderData: [],
        indentLabel: [
          {
            label: '订单状态',
            width: '5',
            prop: 'status'
          },
          {
            label: '商品价格',
            width: '5',
            prop: 'totalPrice'
          },
          {
            label: '优惠',
            width: '5',
            prop: 'discountPrice'
          },
          {
            label: '订单价格',
            width: '5',
            prop: 'amount'
          },
          {
            label: '支付方式',
            width: '10',
            prop: 'payment'
          },
          {
            label: '渠道',
            width: '5',
            prop: 'channel'
          }
        ],
        indentData: [],
        purchaserData: {},
        detailData: {},
        listFilter: [],
        listLoading: false,
        total: 0,
        currentpage: 1,
        pagesize: 10,
        value: [],
        username: '',
        radio: '1',
        option2: '',
        option3: '',
        option4: '',
        options2: [
          {
            label: '订单状态',
            value: ''
          },
          {
            label: '未付款',
            value: '未付款'
          },
          {
            label: '已付款',
            value: '已付款'
          },
          {
            label: '交易成功',
            value: '交易成功'
          },
          {
            label: '交易关闭',
            value: '交易关闭'
          },
          {
            label: '已退款',
            value: '已退款'
          }
        ],
        options3: [
          {
            label: '支付方式',
            value: ''
          },
          {
            label: '支付宝',
            value: '支付宝'
          },
          {
            label: '微信',
            value: '微信'
          }
        ],
        options4: [
          {
            label: '渠道',
            value: ''
          },
          {
            label: '本站',
            value: '本站'
          },
          {
            label: '站外',
            value: '站外'
          },
          {
            label: '微营销',
            value: '微营销'
          }
        ],
        picker: {
          shortcuts: [
            {
              text: '最近一周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end])
              }
            }
          ]
        }
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      handleCancel() {
        this.orderDialog = false;
        this.orderData = []
      },
      handleCLickDialog(scope) {
        this.orderDialog = true;
        this.orderData.push(scope.row)
      },
      handleCLickDetail(scope) {
        this.detailDialog = true;
        const data = scope.row;
        getOrderLogList(data.id).then(response => {
          data.tableData = response.data.items;
          this.detailData = data
        })
      },
      handleClickTrade(scope) {
        this.purchaserDialog = true;
        getUserDetail(scope.row.userId).then(response => {
          this.purchaserData = response.data.item
        })
      },
      changeVisiable1(val) {
        this.purchaserDialog = val
      },
      changeVisiable2(val) {
        this.detailDialog = val
      },
      handleSizeChange(val) {
        console.log(val);
        this.currentpage = 1;
        this.pagesize = val.value;
        if (this.pagesize >= 20) {
          scrollTo(50, 800)
        }
      },
      handleCurrentChange(val) {
        console.log(val);
        this.currentpage = val.value;
        if (this.pagesize >= 20) {
          scrollTo(50, 800)
        }
      },
      handleFilter() {
        this.indentData = this.listFilter.filter(item => {
          if (this.value && (new Date(item.createTime) < this.value[0] || new Date(item.createTime) > this.value[1])) return false;
          if (this.username) {
            if (item.title) {
              if (item.title.toLowerCase().indexOf(this.username.toLowerCase()) === -1) return false
            }
          }
          if (this.option2 && item.status !== this.option2) return false;
          if (this.option3 && item.payment !== this.option3) return false;
          if (this.option4 && item.channel !== this.option4) return false;
          return true
        });
        this.total = this.indentData.length
      },
      clearParams() {
        this.value = [];
        this.username = '';
        this.option2 = '';
        this.option3 = '';
        this.option4 = '';
        this.getData()
      },
      getData() {
        this.listLoading = true;
        getOrderList().then(response => {
          this.indentData = response.data.items.filter(item => {
            if (item.tenantId !== getTenantId()) return false;
            return true
          });
          this.indentData.map(item => {

            if (item.payment === 'alipay') item.payment = '支付宝';
            if (item.payment === 'wx') item.payment = '微信支付';
            if (item.payment === '') item.payment = '其他支付';

            this.ECTransformation(item);
            item.discountPrice = item.totalPrice - item.amount
          });
          this.listFilter = this.indentData;
          this.total = this.indentData.length;
          this.listLoading = false
        })
      },
      updateDiscount() {
        this.orderDialog = false;
        this.orderData[0].discount = this.discount;
        this.orderData[0].amount = this.orderData[0].amount * this.orderData[0].discount / 10;
        this.CETransformation(this.orderData[0]);
        updateDiscount(this.orderData[0]).then(() => {
          this.$notify({
            title: '成功',
            message: '改价成功！',
            type: 'success',
            duration: 2000
          });
          this.getData()
        })
      },
      ECTransformation(item) {
        if (item.status === 'created') item.status = '未付款';
        if (item.status === 'paid') item.status = '已付款';
        if (item.status === 'refunding') item.status = '交易成功';
        if (item.status === 'refunded') item.status = '交易关闭';
        if (item.status === 'cancelled') item.status = '已退款';
        if (item.channel === 'inStation') item.channel = '本站';
        if (item.channel === 'outStation') item.channel = '站外';
        if (item.channel === 'market') item.channel = '微营销'
      },
      CETransformation(item) {
        if (item.status === '未付款') item.status = 'created';
        if (item.status === '已付款') item.status = 'paid';
        if (item.status === '交易成功') item.status = 'refunding';
        if (item.status === '交易关闭') item.status = 'refunded';
        if (item.status === '已退款') item.status = 'cancelled';
        if (item.channel === '本站') item.channel = 'inStation';
        if (item.channel === '站外') item.channel = 'outStation';
        if (item.channel === '微营销') item.channel = 'market'
      }
    }
  }
</script>

<style lang="scss">
  .orderIndent {
    .allsearch {
      margin-top: 0;
      padding: 0;

      .search-content {
        width: 100%;
      }

      .el-table .cell {
        white-space: pre-wrap;
      }

      .el-table td:nth-child(1) {
        text-align: left;
      }
    }
  }
</style>
